var dom = document.getElementById("p_line");
var myChart = echarts.init(dom);
var app = {};
var option;
var data1 = [622, 1113, 1110, 2213, 1022, 1113, 1110, 2213, 3022]; //当月在售
var data2 = [202, 1118, 1119, 2123, 1022, 1113, 1110, 2213, 1022]; //当月销量
//var data3 = [22, 18, 19, 23];		//在册总数
var total_data = function() {
	var datas = [];
	for (var i = 0; i < data1.length; i++) {

		datas.push(data1[i] + data2[i]);
	}
	return datas;
}();
option = {
	legend: {
		//show: false
		orient: 'horizontal',
		x: '91%', //图例位置
		y: '0%',
		itemWidth: 12, //图例宽
		itemHeight: 12, //图例高
		itemGap: 10, //图例之间间距
		textStyle: {
			color: '#b1bcff', //更改坐标轴文字颜色
			fontSize: 15 //更改坐标轴文字大小
		},
		data: [{
				name: '审批中',
				icon: 'rect',
			},
			{
				name: '已完成',
				icon: 'rect',
			}
		]
	},
	grid: {
		left: '3%',
		right: '6%',
		bottom: '0%',
		top: '10%',
		containLabel: true
	},
	xAxis: [{
		axisLine: { //x轴线条颜色
			show: true,
			lineStyle: {
				color: '#374186',
				width: 0.5
			}
		},
		axisLabel: {
			show: true,
			//rotate: 40, //文字倾斜度
			textStyle: {
				color: '#b1bcff', //更改坐标轴文字颜色
				fontSize: 15 //更改坐标轴文字大小
			},
			formatter: function(value) {
				var ret = ""; //拼接加\n返回的类目项  
				var maxLength = 3; //每项显示文字个数  
				var valLength = value.length; //X轴类目项的文字个数  
				var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
				if (rowN > 1) //如果类目项的文字大于3,  
				{
					for (var i = 0; i < rowN; i++) {
						var temp = ""; //每次截取的字符串  
						var start = i * maxLength; //开始截取的位置  
						var end = start + maxLength; //结束截取的位置  
						//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
						temp = value.substring(start, end) + "\n";
						ret += temp; //凭借最终的字符串  
					}
					return ret;
				} else {
					return value;
				}
			}
		},
		axisTick: { //x轴刻度尺
			show: false
		},
		data: ['新增网点', '取消票申请', '撤销网点', '银行卡变更', '异常票申请', '信息变更', '撤销终端', '新增终端', '终端停机']
	}],
	yAxis: [{
		splitLine: {
			show: true, //关闭网格线
			lineStyle: {
				color: '#374186',
				width: 0.5
			}
		},
		axisLabel: {
			show: true,
			textStyle: {
				color: '#b1bcff', //更改坐标轴文字颜色
				fontSize: 15 //更改坐标轴文字大小
			}
		},

	}],
	animationDuration: 3000,
	series: [{
			name: '已完成',
			type: 'bar',
			stack: 'total',
			barWidth: 30, //柱形宽度
			itemStyle: { //柱形色
				normal: {
					color: '#3376ff'
				},
			},
			data: data1,
		},
		{
			name: '审批中',
			type: 'bar',
			stack: 'total', //堆叠柱形
			barWidth: 30, //柱形宽度
			itemStyle: { //柱形色
				normal: {
					color: '#79a5ff'
				},
			},
			data: data2,
		},
		{
			type: 'bar',
			stack: '总计',
			barGap: '-130%', // 左移100%，stack不再与上面两个在一列
			label: {
				normal: {
					show: true,
					position: 'top',
					textStyle: {
						color: '#b1bcff', //更改坐标轴文字颜色
						fontSize: 15 //更改坐标轴文字大小
					},
					formatter: function(p) {
						let value = ''
						if (p.value > 0) {
							value = p.value
							if (value > 999) {
								// 数值加千分号
								let parts = value.toString().split('.')
								parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
								value = parts.join('.')
							}
						}
						return value
					}
				}
			},
			itemStyle: {
				normal: {
					color: 'rgba(128, 128, 128, 0)' // 设置背景颜色为透明
				}
			},
			data: total_data
		}
	]
};

if (option && typeof option === 'object') {
	myChart.setOption(option);
}
